<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01_初识jQuery</title>
		<script type="text/javascript">
			// 使用原生DOM
			window.onload = function(){
				var btn1 = document.getElementById("btn1");
				btn1.onclick = function(){
					var username = document.getElementById('username').value
					alert(username)
				}
			}
		</script>
		<!-- 使用jQuery实现 -->
		<!-- 本引入 -->
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<!-- 远程引入 -->
		<!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script> -->
		<script type="text/javascript">
			// 绑定文档加载完成的监听
			$(function(){
				$('#btn2').click(function(){//给btn2绑定点击监听
					var username = $('#username').val()
					alert(username)
				})
			})
			
			// 1.使用jQuery核心函数: $/jQuery,
			// 2.使用jQuery核心对象: 执行$()返回的对象
		</script>
	</head>
	<body>
		<!-- 需求：点击"确定"按钮，提示输入的值 -->
		用户名：<input type="text" id="username">
		<button id="btn1">确定(原生版)</button>
		<button id="btn2">确定(jQuery版)</button>
	</body>
</html>
